<script setup lang="ts">
// import RightRoot from "@/components/RightSplit/RightRoot.vue";
import {ref, computed, provide, onMounted} from "vue";
import LeftMenu from "@/views/left/leftMenu.vue";
import LeftContent from "@/views/left/leftContent.vue";
import axios from "axios";
// 当前选中的顶部标签索引
const selectedTopLabelIndex = ref(0);
// 当前选中的子菜单项索引
const selectedSubItemIndex = ref(0);
// 创建一个响应式变量来存储API响应的数据
const apiData = ref(null);
const loading = ref(false);
const error = ref(null);

// 定义所有顶部标签及其对应的子菜单项和组件
const topLabels = [
  {
    label: '系统资源',
    subItems: [
      {label: '模型', component: 'sysModelContent'},
      {label: '面板', component: 'sysPanelContent'},
      {label: 'DOM', component: 'sysDOMContent'}
    ]
  },
  {
    label: '我的资源',
    subItems: [
      {label: '模型', component: 'myModelContent'},
      {label: '面板', component: 'myPanelContent'},
      {label: '组态', component: 'myConfigurationContent'},
      {label: '图片', component: 'myImageContent'}
    ]
  },
  {
    label: '数据',
    subItems: [
      {label: '数据集55f9c6b', component: 'dataset55f9c6bContent'},
      {label: '数据集5f89aef8', component: 'dataset5f89aef8Content'}
    ]
  },
  {
    label: '结构',
    subItems: [
      {label: '场景', component: 'sceneContent'},
      {label: '节点', component: 'nodeContent'},
      {label: '分组', component: 'groupContent'},
      {label: 'DOM', component: 'structureDOMContent'}
    ]
  }
];
// 提供共享状态
/*
provide('topLabels', topLabels);
provide('selectedTopLabelIndex', selectedTopLabelIndex);
*/


// 根据选中顶部标签计算要显示的子菜单项
const currentSubItems = computed(() => {
  return topLabels[selectedTopLabelIndex.value]?.subItems || [];
});

// 根据选中子菜单项计算要显示的组件
const currentComponent = computed(() => {
  if (currentSubItems.value && currentSubItems.value.length > selectedSubItemIndex.value) {
    return currentSubItems.value[selectedSubItemIndex.value].component;
  }
  return 'No Content Available';
});

// 定义一个异步函数来调用API
const fetchApiData = async (label: string) => {
  /*try {
    loading.value = true;
    error.value = null;

    // 构建 API URL，这里假设有一个固定的基地址和路径参数
    const apiUrl = `http://localhost:8088/api/tenant/assetInfos?pageSize=10&page=0&textSearch=${encodeURIComponent(label)}&sortProperty=createdTime&sortOrder=DESC`;

    // 获取令牌（假设你已经有一个方法来获取或存储令牌）
    const token =
    //const token = "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsaXRoaXVtQHRlc3QuY29tIiwidXNlcklkIjoiOWUyMjMyMDAtY2NkYi0xMWVmLWI4NmQtMzllOTU0ZDczNTVjIiwic2NvcGVzIjpbIlRFTkFOVF9BRE1JTiJdLCJzZXNzaW9uSWQiOiI3YjE5ZDI2Zi0yNGE3LTQ0NzYtYjg5Zi05MDQ0MDI3YTY0Y2UiLCJleHAiOjE3MzYzMjU2OTYsImlzcyI6InRoaW5nc2JvYXJkLmlvIiwiaWF0IjoxNzM2MzE2Njk2LCJmaXJzdE5hbWUiOiLog6EiLCJlbmFibGVkIjp0cnVlLCJpc1B1YmxpYyI6ZmFsc2UsInRlbmFudElkIjoiODk2N2E1NzAtY2NkYi0xMWVmLWI4NmQtMzllOTU0ZDczNTVjIiwiY3VzdG9tZXJJZCI6IjEzODE0MDAwLTFkZDItMTFiMi04MDgwLTgwODA4MDgwODA4MCJ9.8eJ7lQdqc1nk6n71nER0JRN_8Fcl0pNXNvwnlCuPeJ45uN2bFBigU5a4dhy84a5ZWL6VZMoWrIy2FgoTqPw_NA" // 你需要实现这个函数来获取令牌

    // 发起 API 请求，并添加 Authorization 头
    const response = await axios.get(apiUrl, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });

    apiData.value = response.data; // 假设API响应中的数据在data字段中

  } catch (err) {
    if (err.response && err.response.status === 401) {
      error.value = 'Unauthorized: Please log in again.';
      // 你可以在这里处理未授权的情况，例如重定向到登录页面
    } else {
      error.value = 'Failed to fetch data: ' + err.message;
    }
  } finally {
    loading.value = false;
  }*/
};
// 选择顶部标签的方法
const selectTopLabel = async (index: number) => {
  selectedTopLabelIndex.value = index;
  selectedSubItemIndex.value = 0; // 每次切换顶部标签时重置子菜单项索引
  const label = topLabels[index].label;
  await fetchApiData(label); // 在选择顶部标签时调用 API
};

// 选择子菜单项的方法
const selectSubItem = (index: number) => {
  selectedSubItemIndex.value = index;
};

// 页面加载时默认选中“系统资源”
onMounted(() => {
  selectTopLabel(0); // 确保页面加载时默认选中“系统资源”
});

</script>

<template>
  <div class="left-layout">
    <!-- Top buttons -->
    <header class="header">
      <el-button
          v-for="(label, index) in topLabels"
          :key="index"
          @click="selectTopLabel(index)"
          :class="{ 'is-active': selectedTopLabelIndex === index }"
          class="nav-button"
      >
        <span class="span">{{ label.label }}</span>
      </el-button>
    </header>

    <!-- Left menu and content -->
    <div class="content-container">
      <left-menu
          :sub-items="currentSubItems"
          :selected-sub-item-index="selectedSubItemIndex"
          @update:selected-sub-item-index="selectSubItem"
      ></left-menu>
      <left-content :current-component="currentComponent"/>
    </div>
  </div>
</template>

<style scoped>
.content-container {
  display: flex;
}

.header {
  flex-shrink: 0;
  width: 18vw;
  height: 5vh;
  background-color: #1e2430;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #303648; */
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #435486; */
  width: 100%;
  height: 100%;
  color: white; /* 确保文字颜色与背景对比明显 */
}

.box img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  margin-bottom: 1vh;
}

.header .span {
  font-size: 0.8vw;
}

:deep .el-button {
  /* padding: 0; */
  width: 4vw !important;
}

:deep .el-button {
  margin-left: 0.4vw !important;
  height: 3.4vh;
  margin-top: 0.75vh;
  background: #5882d6;
  border: none;
  color: #ffffff;
}
</style>
